<template>
    <div class="CommentDetails">
<!--        头部栏-->
        <div class="CommentDetails-p">
            <el-row :gutter="20">
                <el-col :span="6" >
                    <div class="grid-content bg-purple">
                        <p style="float:left; margin-top: 8px">评价详情</p>
                    </div>
                </el-col>
                <el-col :span="6" :offset="12">
                    <div class="grid-content bg-purple">
                        <el-button icon="el-icon-arrow-left" @click="returnPage" circle></el-button>
                        <el-button icon="el-icon-refresh-left" circle></el-button>
                        <el-button icon="el-icon-switch-button" @click="returnPage" circle></el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-container>
<!--        左侧个人信息栏-->
            <div>
            <el-aside width="200px" >
                <template>
                    <el-row class="demo-avatar demo-basic">
                        <el-col  v-for="(item,index) in CommentDeta" :span="12" >
                            <div class="demo-basic--circle">
<!--                                头像部分-->
                                <div class="block" style="padding-left: 54px;width: 80px">
                                    <el-avatar :size="80" :src="circleUrl"></el-avatar>
                                    <span type="primary">{{item.name}}</span>
                                </div>
                            </div>

                        </el-col>
                        <!--                                信息部分-->
                        <el-descriptions column="1" v-for="(item,index) in CommentDeta">
                            <el-descriptions-item label="标题">{{item.articleTitle}}</el-descriptions-item>
                            <el-descriptions-item label="创作者">xxx</el-descriptions-item>
                            <el-descriptions-item label="分类">{{item.name}}</el-descriptions-item>
                            <el-descriptions-item label="创作日期">{{item.createDate}}</el-descriptions-item>
                            <el-descriptions-item label="电话号码">{{item.phone}}</el-descriptions-item>
                        </el-descriptions>
                    </el-row>
                </template>
            </el-aside>
            </div>
<!--            右侧内容区-->
            <el-main >
                <el-descriptions column="1" v-for="(item,index) in CommentDeta">
<!--                    大标题-->
                    <el-descriptions-item label="" colon="false"><h3>{{item.articleTitle}}</h3></el-descriptions-item>
<!--                    文章内容-->
                    <el-descriptions-item label="">{{item.articleContent}}</el-descriptions-item>
<!--                    图片-->
                    <el-descriptions-item label="">图片
                        <el-image
                                style="width: 400px; height: 550px"
                                :src="url"
                                :preview-src-list="srcList">
                        </el-image>
                    </el-descriptions-item>
                </el-descriptions>
<!--                表格展示-->
                <el-descriptions direction="vertical"  :column="4" border size="small" v-for="(item,index) in CommentDeta">
                    <el-descriptions-item label="查看量" size="100px">{{item.articleHits}}</el-descriptions-item>
                    <el-descriptions-item label="点赞量" size="100px">{{item.articleLike}}</el-descriptions-item>
                    <el-descriptions-item label="收藏量" :span="1" size="100px">{{item.articleReviews}}</el-descriptions-item>
                    <el-descriptions-item label="分享量" :span="1" size="100px">{{item.articleShare}}</el-descriptions-item>
                </el-descriptions>
<!--                回复评论内容-->
                <div class="grid-content" >
                    <div>
                        <el-row>
                            <el-col :span="3">
                                <div class="grid-content bg-purple" id="paddingts">
                                    <i class="el-icon-s-comment">全部评论</i>
                                </div>
                            </el-col>

                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <div class="grid-content bg-purple">
                                    <el-row class="demo-avatar demo-basic">
                                        <el-col :span="12">
                                            <div class="sub-title">circle</div>
                                            <div class="demo-basic--circle">
                                                <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple">

                                    <ul>
                                        <li>
                                            嗷嗷
                                        </li>
                                        <li>
                                            <span>回复 用户名字 ：</span>
                                            <span></span>
                                        </li>
                                    </ul>
                                </div>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "CommentDetails",
        props:["id"],

        data(){
            return{
                //评论表的信息
                CommentDeta:[],
                //头像路径
                circleUrl: null,
                url: null,
                srcList: null,

                form: {
                    name: '',
                    delivery: false,
                    desc: ''
                }
            }
        },

        methods:{
            //点击返回上一级页面事件
            returnPage(){
                if (window.history.length <= 1) {
                    this.$router.push({ path: "/vCircle/add" });
                    return false;
                } else {
                    this.$router.go(-1);
                }
            },
            //form 表单提交事件
            onSubmit() {
                console.log('submit!');
            },
            //数据信息
            commentdata(){
                console.log(this.id)
                this.$http.get("/CommentDetails/getCommentDetails",{
                    params:{
                    microcircleId:this.id,
                    }
                }).then(res=>{
                    this.CommentDeta=res.data;
                    console.log(res.data)

                    this.circleUrl=this.CommentDeta[0].avatarUrl;
                    this.url=this.CommentDeta[0].articleUrl;
                    this.srcList=this.CommentDeta[0].articleUrl;

                });
            },
        },
        created() {
            this.commentdata();

        }

    }
</script>

<style scoped>
    .CommentDetails-p{
        background-color: #F3F3F3;
        vertical-align: middle;
    }
    .bb{
        width:300px;
    }
    li{
        list-style: none;
        text-align:left;
        text-align:center
    }
    .el-descriptions__body{
        height: 1200px;
    }
    #paddingts {
        padding-top: 20px;
    }

</style>